<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>群星网约车</title>
  <!--这里引入页面的样式-->
  <style>
    
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<!-- 引入百度地图 API -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rXA8iQy9OhoIKkZEjWbO0xJR5c40gDcg"></script>
<script src="https://api.map.baidu.com/api?v=1.0&amp;type=webgl&amp;ak=rXA8iQy9OhoIKkZEjWbO0xJR5c40gDcg"></script>

<body>
<div id="app">
 <el-container>
     <!-- 顶部导航栏 -->
     <el-header>滴滴出行</el-header>
     <!-- 主体内容区域 -->
 	<input type="text" id="searchInput" placeholder="请输入要搜索的地点">
 	<button id="searchBtn">搜索</button>
	<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
     <el-main>
         <!-- 地图显示 -->
         <div id="allmap" style="height: 400px;"></div>
         <!-- 订单列表 -->
         <el-card style="margin-top: 20px;">
             <div slot="header">
                 我的订单
             </div>
             <el-table :data="orderList" style="width: 100%" stripe>
                 <el-table-column prop="orderNumber" label="订单号"></el-table-column>
                 <el-table-column prop="startLocation" label="起点"></el-table-column>
                 <el-table-column prop="endLocation" label="终点"></el-table-column>
                 <el-table-column prop="status" label="状态"></el-table-column>
             </el-table>
         </el-card>
     </el-main>
     <!-- 个人中心侧边栏 -->
     <el-aside width="200px">
         <el-menu default-active="1" class="el-menu-vertical-demo">
             <el-menu-item index="1">个人信息</el-menu-item>
             <el-menu-item index="2">我的订单</el-menu-item>
             <el-menu-item index="3">支付管理</el-menu-item>
             <el-menu-item index="4">客服中心</el-menu-item>
         </el-menu>
     </el-aside>
 </el-container>
</div>


<script>
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
        map: null,
            orderList: [
                { orderNumber: '123456', startLocation: '起点A', endLocation: '终点B', status: '进行中' },
                { orderNumber: '654321', startLocation: '起点C', endLocation: '终点D', status: '已完成' }
            ],
		peopleX: "",
		penpleY: "",
		bassX: "",
		bassY: ""
        };
    },
    methods: {
		initMap() {
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(116.331398,39.897445);
			map.centerAndZoom(point,12);
			// 启用滚轮缩放功能
			map.enableScrollWheelZoom(true);
			// 添加放大缩小控件
			map.addControl(new BMap.NavigationControl());
			// 添加搜索功能
			var local = new BMap.LocalSearch(map, {
				renderOptions: { map: map }
			});

			// 监听搜索按钮点击事件
			document.getElementById("searchBtn").addEventListener("click", function() {
				var keyword = document.getElementById("searchInput").value;
				local.search(keyword);
				var geocoder = new BMap.Geocoder();
				var address = keyword; // 要查询的地点名称
				geocoder.getPoint(address, function(point){
				    if (point) {
				        var lng = point.lng; // 经度
				        var lat = point.lat; // 纬度
						this.bassX=lng;
						this.bassY=lat;
				        console.log("地点：" + address + " 的经度：" + lng + "，纬度：" + lat);
				    } else {
				        console.log("无法获取地点：" + address + " 的经纬度坐标。");
				    }
				}, "衡阳市");
			});
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					alert('您的位置：'+r.point.lng+','+r.point.lat);
					this.peopleX=r.point.lng;
					this.peopleY=r.point.lat;
					console.log(this.peopleX);
					console.log(this.peopleY);
				}
				else {
					alert('failed'+this.getStatus());
				}
					},{enableHighAccuracy: true});

				},
    },
    mounted(){
		this.initMap();
    }
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>

</script>
</body>
</html>